<template>
  <view class="container">
    <view class="container-body">
      <view class="container-body__content">
        <view class="container-body__content-tabs-container">
          <view class="container-body__content-tabs-container-title">
            支付方式：
          </view>
          <view class="container-body__content-tabs">
            <view class="container-body__content-tabs-item" :class="{active:item.value === payType}"
                  v-for="(item, index) in chargeList" :key="index" @click.stop="payTypeChange(item)">
              <text>{{ item.name }}</text>
            </view>
          </view>
        </view>
        <view class="container-body__content-info">
          <view class="container-body__content-info-label">
            <text>需缴费金额：</text>
          </view>
          <view class="container-body__content-info-item">
            <view style="display: flex; align-items: center;font-size: 50rpx; color: #F9B523;">￥{{ totalCost }}</view>
          </view>
        </view>
        <view class="container-body__content-qrcode" v-if="payType === '2' && qrcodeContent">
          <view class="container-body__content-qrcode-content">
            <view class="container-body__content-qrcode-content-image">
              <qrcode cid="qrcode" ref="qrcode" :val="qrcodeContent" :size="300" :onval="true" :loadMake="true"
                      :usingComponents="true"/>
            </view>
          </view>
          <view class="container-body__content-qrcode-footer">
            <view style="display: flex;align-items: center;justify-content: center;color:#169BD5;" @click="handleRefreshQrcode">
              <u-icon name="reload" color="#169BD5"></u-icon>刷新
            </view>
            <view style="display: flex;align-items: center;justify-content: center;color: #169BD5;" @click="handleSaveQrcode">保存付款码</view>
          </view>
        </view>
      </view>
    </view>
    <view class="container-footer">
      <view class="container-footer__btn" v-if="payType === '1'">
        <u-button type="primary" @click.stop="submit">去付款</u-button>
      </view>
      <view class="container-footer__btn" v-if="payType === '2' && !qrcodeContent">
        <u-button type="primary" @click.stop="submit">生成付款码</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import {getWorkOrderDetail, unifiedPay} from "@/api/manager/workOrder";


export default {
  data() {
    return {
      // 工单ID
      workOrderId: '',
      // 工单详情
      orderInfo: {},
      // 支付方式
      payType: '1',
      // 支付方式列表
      chargeList: [
        {
          name: '微信支付',
          value: '1'
        },
        {
          name: '付款码',
          value: '2'
        }
      ],
      // 二维码内容
      qrcodeContent: '',
    };
  },
  computed: {
    //总计费用
    totalCost() {
      let total = 0
      if (this.orderInfo.workOrderChargeItemList && this.orderInfo.workOrderChargeItemList.length > 0) {
        this.orderInfo.workOrderChargeItemList.forEach(item => {
          total += (item.materialCost * item.chargeQuantity) + item.laborCost
        })
      }
      return total.toFixed(2)
    }
  },
  onLoad(options) {
    this.workOrderId = options.workOrderId
    this.init()
  },
  methods: {
    init() {
      // 获取工单详情
      this.getWorkOrderDetail();
    },
    // 获取工单详情
    getWorkOrderDetail() {
      if (!this.workOrderId) {
        return
      }
      getWorkOrderDetail(this.workOrderId).then(res => {
        if (res.code === 200) {
          this.orderInfo = res.data;
        }
      })
    },
    payTypeChange(item) {
      this.payType = item.value
    },
    // 刷新二维码
    handleRefreshQrcode() {
      this.$modal.loading()
      unifiedPay(this.workOrderId, '2').then(res => {
        if (res.code === 200) {
          this.qrcodeContent = res.data
          this.$refs.qrcode._makeCode()
          setTimeout(() => {
            this.$modal.closeLoading()
          }, 1000)
        }
      })
    },
    handleSaveQrcode() {
      this.$refs.qrcode._saveCode()
    },
    // 提交
    submit() {
      // 调起支付
      unifiedPay(this.workOrderId, this.payType).then(res => {
        if (res.code === 200) {
          if (this.payType === '1') {
            wx.requestPayment({
              timeStamp: res.data.timeStamp,
              nonceStr: res.data.nonceStr,
              package: res.data.package,
              signType: res.data.signType,
              paySign: res.data.paySign,
              success: (e) => {
                console.log("调起成功!")
                uni.showToast({
                  title: '支付成功',
                  icon: 'none',
                })
                setTimeout(() => {
                  this.back()
                }, 1000)
              },
              fail: function (e) {
                console.log("失败: " + e);
              }
            })
          } else if (this.payType === '2') {
            this.qrcodeContent = res.data
          }

        }
      })
    },
    // 返回
    back() {
      // 判断当前页面是否有上一页
      let pages = getCurrentPages()
      if (pages.length > 1) {
        // 页面栈中有上一页，则返回上一页
        this.$tab.navigateBack()
      } else {
        this.$tab.redirectTo('/pages/manager/workOrder/maintenance/list')
      }
    },
  },
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;

  .container-body {
    margin-bottom: 160rpx;

    .container-body__content {
      background-color: #fff;
      padding: 20rpx;
      height: 800rpx;

      .container-body__content-tabs-container {
        .container-body__content-tabs {
          display: flex;
          margin: 20rpx 0;

          .container-body__content-tabs-item {
            width: 50%;
            text-align: center;
            padding: 10rpx;
            border: 1rpx solid #ccc;

            &.active {
              color: #169BD5;
              border: 1rpx solid #169BD5;
            }
          }
        }
      }

      .container-body__content-info {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .container-body__content-qrcode {
        .container-body__content-qrcode-content {
          display: flex;
          align-items: center;
          justify-content: center;

          .container-body__content-qrcode-content-image {
            padding: 30rpx;
            background: #EAEAEA;
          }
        }
      }
    }

  }

  .container-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 30rpx 20rpx;
    display: flex;
    justify-content: space-between;

    &__btn {
      width: 100%;
      border-radius: 10rpx;
      border: 1rpx solid #ccc;

      &:last-child {
        margin-left: 20rpx;
      }
    }
  }
}
</style>
